<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物商场</title>
    <script src="./js/jquery.min.js"></script>
    <!-- <link rel="stylesheet" href=""> -->
    <style>
        .box {
            display: flex;
            justify-content: center;
        }

        .container {
            min-width: 960px;
            margin: 0 auto;
        }

        .flex {
            display: flex;
            justify-content: space-between;
        }

        .table {
            padding-top: 50px;
        }

        th {
            background-color: #F4F4F4;
        }

        th,
        td {
            padding: 10px;
            text-align: center;
        }
        .tr:hover{
            background-color: #FFC;
        }
        .delno{
            opacity: 0.4;
        }
        .ano{
            color: #818181;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="container">
            <h1 style="text-align: center;">购物车添加删除功能</h1>
            <div class="flex">
                <form id="form">
                    <div>
                        <label for="splx">
                            商品类型：
                            <select id="splx" name="type">
                                <option value="手机">手机</option>
                                <option value="电脑">电脑</option>
                                <option value="单反">单反</option>
                            </select>
                        </label>
                        <label for="spmc">
                            商品名称： <input type="text"  name="spmc" id="spmc" />
                        </label>
                        <label for="spsl">
                            商品数量： <input type="number"  max="9999" min="0"  name="spsl" id="spsl" />
                        </label>
                    </div>

                </form>
                <button onclick="submit()" >提交商品</button>
                <button onclick="delno()" class="del">禁止删除</button>
            </div>


            <div class="table">
                <table width="100%"  border="1" id="table" cellspacing="0">
                    <tr>
                        <th>序号</th>
                        <th>商品类型</th>
                        </th>
                        <th>商品名称</th>
                        <th>商品数量</th>
                        <th>操作</th>
                    </tr>
                </table>
            </div>
        </div>

    </div>


</body>
<script>
    // 获取表单内的内容
    let tabledata = [];
    let num;
    let off = true;
    // 提交表单
    function submit() {
        var d = {};
        // 获取form的值
        var t = $('#form').serializeArray();
        // 将获取的到值解析成json格式
        $.each(t, function () {
            d[this.name] = this.value;
        });
        if(d.spmc.length === 0){
            alert('商品名称不能为空');
            return false;
        }
        if(d.spsl.length === 0){
            alert('商品数量不能为空');
            return false;
        }
        let tr = document.querySelectorAll('.tr');
        let key = tr.length++;
        key+=1;
        let itemhtml = `
            <tr class="tr">
                        <td>${key}</td>
                        <td>${d.type}</td>
                        <td>${d.spmc}</td>
                        <td>
                            <span onclick="jian('num${key}')">-</span>
                            <span class="num${key}">${d.spsl}</span> 
                            <span onclick="jia('num${key}')">+</span>
                        </td>
                        <td><a disabled="true" class="a" href="javascript:return false;" onclick="delsp(${key})">删除</a></td>
                    </tr>
            `
        $('#table').append(itemhtml);
    }
    /**
     * 加加操作
     */ 
    function jia(classname) {
        num = parseInt($('.' + classname).text());
        num++;
        // console.log(num)
        if (num >= 9999) {
            num = 9999
        }
        $('.' + classname).text(parseInt(num))
    }
    /**
     * 减减操作
     */ 
    function jian(classname) {

        num = parseInt($('.' + classname).text());
        num--;
        if (num <= 0) {
            num = 0
            alert('最小为0');
        }
        $('.' + classname).text(parseInt(num))
    }
    /**
     * 删除
     */ 
    function delsp(index) {
        // 根据变量判断是否可以点击
        if(off){
            let tr = document.querySelectorAll('.tr');
        for (const key in tr) {
            tr[key].onclick = function () {
                this.remove()
            }
        }
        }
    }
    /**
     * 不可点击删除设置
     */ 
    function delno(){
        if(off ){
            $('.a').addClass('ano');
            $('.del').text("恢复删除")
            
            off  =false;
        }else{
            off  =true;
            $('.a').removeClass("ano")
            $('.del').text("禁止删除")
            
        }

    }
</script>

</html>